<template>
  <view :data-theme="globPrimary">
    <u-navbar title="评论" :custom-back="back"
      ><edu-button slot="right" class="header-btn" type="text" hover-class="none" @click="add"
        >提交</edu-button
      ></u-navbar
    >
    <view
      class="add-comment"
      :style="{
        minHeight: globWindowHeight - globNavbarHeight - globStatusBarHeight + 'px',
      }"
    >
      <view class="u-border-bottom score-wrap">
        <text class="left">评分</text>
        <u-rate
          v-model="score"
          inactive-color="#DCDFE6"
          active-color="#FF8A52"
          inactive-icon="star-fill"
          size="40"
        ></u-rate>
        <text class="right">{{ `${score}分` }}</text>
      </view>
      <view class="textarea-wrap"
        ><u-input v-model="content" type="textarea" :placeholder="placeholder" :maxlength="200"
      /></view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      score: 1,
      content: '',
      placeholder: '您可以分享学习体验、课程内容、老师讲课的风格等',
      queryId: '',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globCommentSwitch: 'projectSetting/getGlobCourseCommentSwitch',
      globWindowHeight: 'projectSetting/globWindowHeight',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
  },
  onLoad(options) {
    this.queryId = options.id
    // 如果用户已点评默认填充内容
    this.$edu.api.getCourseComment(this.queryId).then((res) => {
      const {
        data: { has_comment, my_comment },
      } = res
      if (has_comment) {
        this.score = my_comment.star
        this.content = my_comment.content
      }
    })
  },
  methods: {
    add() {
      if (this.$u.trim(this.content).length == 0) {
        this.$u.toast('内容不能为空')
        return
      }
      this.$edu.api
        .createCourseComment(this.queryId, {
          star: this.score,
          content: this.content,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          // #ifndef H5 || APP-PLUS
          var pages = getCurrentPages()
          var prevPage = pages[pages.length - 2]
          prevPage.setData({
            mydata: {
              type: true,
            },
          })
          // #endif
          this.$u.route({
            type: 'navigateBack',
          })
          uni.$emit('courseTabUpdate')
        })
    },
    back() {
      uni.navigateBack({})
      uni.$emit('courseTabUpdate')
    },
  },
}
</script>

<style lang="scss" scoped>
.u-slot-right {
  display: flex;
  align-items: center;
}
.add-comment {
  background-color: #fff;
}
.header-btn {
  padding: 0 30rpx;
  display: flex;
}

.score-wrap {
  display: flex;
  align-items: center;
  padding: 45rpx 30rpx 35rpx;
  .left {
    font-size: 30rpx;
    font-weight: 500;
    color: $edu-main-color;
    margin-right: 20rpx;
  }
  .right {
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-tips-color;
    margin-left: 40rpx;
  }
}
.textarea-wrap {
  padding: 25rpx 30rpx;
}
.inputLength {
  position: fixed;
  right: 30rpx;
  bottom: 32px;
  font-size: 28rpx;
  font-weight: 400;
  color: $edu-tips-color;
}
</style>
